<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听</title>
</head>
<body>
    <h1>事件监听</h1>
    <p>事件监听绑定事件的好处,就是可以一个时间绑定多个函数</p >
    <button id="btn1">添加事件监听</button>
    <button id="btn2">移除事件监听</button>
    <script>
function fun1(){
    console.log('out put btn1');
    
}
function fun2(){
    console.log('out put btn2');
    
}
//获得btn1：
var btn1 = document.getElementById('btn1')
//通过事件监听绑定点击事件 调用两个函数
btn1.addEventListener('click',fun1)
btn1.addEventListener('dblclick',fun2)

//获得btn2
var btn2 =document.getElementById('btn2')
//通过事件监听绑定函数移除btn的两个监听事件
btn2.addEventListener('click',function(){
    btn1.removeEventListener('btn1',fun1)
    btn2.removeEventListener('btn2',fun2)
})
    </script>
    <a href="http://www.163.com" id="a1">163</a>
    <!--a标签 添加点击事件 输出你好世界-->
    <script>
         var btn3=document.getElementById('a1')
      btn3.onclick=function(){
        console.log('你好世界')
        stopDefault();
    }  
   //事件阻止
   function stopDefault(){
    if(event &&event.preventDefault){
        //feiie
event.preventDefault()
    }else{
        window.event.returnValue=false;
    }
   }
    </script>
    <!--阻止submit事件-->
    <form action="" >
        <input type="text" name="username">
        <input type="submit" value="提交" id="sub">
    </form>
    <script>
        //阻止submit的默认事件 点击提交输出username的内容
     var sub = document.querySelector('input[type="submit"]')
     sub.onclick=function(){
        console.log(document.getElementsByName("username")[0].value);
        stopDefault();
     }

    </script>
    <h1>事件冒泡</h1>
    <p>事件冒泡（bubble）所谓事件冒泡就是事件向上传导 大概后代元素上事件
        被触发时 其祖先级元素的相同事件会被触发 在开发中大部分情况事件冒泡
        还是有用的 如果不希望事件冒泡发生还可以通过事件对象来取消冒泡
    </p>
    <div id="d1" onclick="fun1()">div1
    <div id="d2" onclick="fun2()">div2</div></div>
    <style>
        #d1{
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        #d2{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
    <script>
        function fun1(){
            alert('div1触发事件')
        }
        function fun2(){
            alert('div2触发事件')
            stopBubble();
        }
        //阻止冒泡
        function stopBubble() {
        if (event&&event.stopPropagation) {
            //非ie
            event.stopPropagation();
        }else{
            //ie
            window.event.cancelBubble=ture;
        }
        }
    </script>
</body>
</html>